<template>
  <el-row>
    <el-col :span="7" @click="changePage(1)">
      <router-link to="/QuickExam" custom v-slot="{ isActive, navigate }">
        <div class="d1 dataP">
          <div :class="{ active: isActive }" @click="navigate" class="d">
            <label class="label">快速练习</label><br>
            <span class="sp">Quick practice</span>
          </div>
        </div>

      </router-link>
    </el-col>
    <el-col :span="7" :offset="1" @click="changePage(1)">
      <router-link to="/historyExam" custom v-slot="{ isActive, navigate }">
        <div class="d2 dataP">
          <div :class="{ active: isActive }" @click="navigate" class="d">
            <label class="label">历年试卷</label><br>
            <span class="sp">Past examination papers</span>
          </div>
        </div>
      </router-link>
    </el-col>
    <el-col :span="7" :offset="1" @click="changePage(1)">
      <router-link to="/noteHome" custom v-slot="{ isActive, navigate }">
        <div class="d3 dataP">
          <div :class="{ active: isActive }" @click="navigate" class="d">
            <label class="label">笔记本</label><br>
            <span class="sp">Smart combination papers</span>
          </div>
        </div>

      </router-link>
    </el-col>

    <el-col :span="11" class="d4 mg">
      <label class="label2">小模考</label><br>
      <el-button type="default" round>开始考试</el-button>
      <br>
      <span class="sp">每一次的锻炼都是为了更好的迎接下一次的挑战！Every workout is about getting ready for the next challenge!</span>
    </el-col>
    <el-col :span="11" :offset="1" class="d4 mg">
      <div class="block text-center" m="t-4">
        <el-carousel trigger="click" height="150px" indicator-position="none" style="border-radius: 20px">
          <el-carousel-item style="border-radius: 20px;" :style="item.color == '' ? '' : 'background:'+item.color+';'" v-if="countdownList.length !== 0 " v-for="(item,index) in countdownList" :key="index">
            <br>
            <label class="label2">距离&nbsp;<span class="sp2">{{ item.name }}</span>&nbsp;还剩&nbsp;<span class="sp3">{{ Math.ceil(Math.abs((new Date(item.date1)).getTime() - (new Date()).getTime()) / (1000 * 3600 * 24))}}</span>&nbsp;天</label><br>
            <el-button type="default" size="small" round @click="dialogVisible = true">设置倒计时</el-button>
            <br>
            <span class="sp">{{ item.date1 }}</span><br>
            <span class="sp">{{ item.desc }}</span>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-col>
  </el-row>

  <div>
    <el-dialog v-model="dialogVisible" title="设置倒计时" width="50%" :before-close="handleClose"
               style="border-radius: 20px">
      <el-row>
        <el-col :span="6">
          <label class="label_title">&nbsp;当前已设置&nbsp;&nbsp;&nbsp;</label>
          <el-empty description="还没有设置倒计时哦~" v-if="countdownList.length === 0"/>
          <div class="dialog_div_1 mg" v-else>
            <div class="dialog_div_1_1">
              <el-row class="mg dialog_row" :style="item.color == '' ? '' : 'background:'+item.color+';'" v-if="countdownList.length != 0" v-for="(item,index) in countdownList">
                <el-col :span="16">
                  <label class="label2" style="color: #ff6348">{{item.name}}</label><br>
                  <p class="sp4">{{ item.date1 }}</p>
                  <p class="sp4">{{ item.desc }}</p>
                </el-col>
                <el-col :span="8">
                  <div class="dialog_div_1_2">
                    <el-button type="primary" round size="small" @click="editCountdown(index)">编辑</el-button>
                    <br>
                    <br>
                    <el-button type="warning" round size="small">x</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="18">

          <el-form :model="form" label-width="120px">
            <div style="text-align: center;width: 100%;margin-bottom: 1vh"><label style="border-radius: 50px;background: rgba(0, 206, 209, 1);padding: 5px">&nbsp;&nbsp;新建倒计时&nbsp;&nbsp;</label></div>
            <el-form-item label="设置标题" required>
              <el-input v-model="form.name" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="到期时间" required>
              <el-col :span="24">
                <el-date-picker
                    v-model="form.date1"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                />
              </el-col>
            </el-form-item>

            <el-form-item label="设置背景">
              <el-color-picker v-model="form.color" :label="123" show-alpha :predefine="predefineColors" />
            </el-form-item>
            <el-form-item label="添加备注">
              <el-input v-model="form.desc" type="textarea"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-if="!showEditBtn" @click="saveCountdown">保存</el-button>
              <el-button type="primary" v-if="showEditBtn" @click="updateCountdown">修改</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import showPageStore from "../store/showPageStore";
import {ref, reactive, onMounted, onUpdated} from "vue"

const dialogVisible = ref(false)
const sp = showPageStore()
const countdownList = ref([])
const showEditBtn = ref(false)
const countdown_index = ref(0)

const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

onMounted(()=>{
  if (localStorage.getItem("countdown")){
    countdownList.value = JSON.parse(localStorage.getItem("countdown"))
  }
})
onUpdated(()=>{
  form.name = ""
  form.color = ""
  form.desc = ""
  form.date1 = ""
})

const handleClose = () => {
  if (localStorage.getItem("countdown")){
    countdownList.value = JSON.parse(localStorage.getItem("countdown"))
  }
  dialogVisible.value = false
}

const changePage = (num) => {
  sp.setNum(num)
}

const form = reactive({name: '', date1: '', desc: '', file: ''})

const saveCountdown = async () => {
  if (form.name === ""){
    myApi.alert("还没有输入标题呢＞︿＜","info")
  }
  else if (form.date1 === ""){
    myApi.alert("时间还没选哦(￣o￣) . z Z","info")
  }
  else {
    let d1 = new Date(form.date1);
    form.date1 = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate();
    if (localStorage.getItem("countdown")){
      let countdown = JSON.parse(localStorage.getItem("countdown"))
      countdown.unshift(form)
      localStorage.removeItem("countdown")
      localStorage.setItem("countdown",JSON.stringify(countdown))
    }
    else {
      let countdown = "[" + JSON.stringify(form) + "]"
      localStorage.setItem("countdown",countdown)
    }
    if (localStorage.getItem("countdown")){
      countdownList.value = JSON.parse(localStorage.getItem("countdown"))
    }
    form.name = ""
    form.date1 = ""
    form.desc = ""
    form.color = ""
    myApi.alert("倒计时保存成功！","info")
    dialogVisible.value = false
  }
}

const updateCountdown = () => {
  if (form.name === ""){
    myApi.alert("还没有输入标题呢＞︿＜","info")
  }
  else if (form.date1 === ""){
    myApi.alert("时间还没选哦(￣o￣) . z Z","info")
  }
  else {
    let d1 = new Date(form.date1);
    form.date1 = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate();
      let countdown = JSON.parse(localStorage.getItem("countdown"))
      countdown[countdown_index.value] = form
      localStorage.removeItem("countdown")
      localStorage.setItem("countdown",JSON.stringify(countdown))


    if (localStorage.getItem("countdown")){
      countdownList.value = JSON.parse(localStorage.getItem("countdown"))
    }
    form.name = ""
    form.date1 = ""
    form.desc = ""
    form.color = ""
    myApi.alert("倒计时修改成功！","info")
    showEditBtn.value = false
    dialogVisible.value = false
  }
}
const editCountdown = (index) => {
  countdown_index.value = index
  showEditBtn.value = true
  let data = JSON.parse(localStorage.getItem("countdown"))
  form.name = data[index].name
  form.date1 = data[index].date1
  form.color = data[index].color
  form.desc = data[index].desc
}


</script>

<style scoped>
.d {
  height: 100%;
  width: 100%;
  padding-bottom: 25px;
  padding-top: 25px;
}

.d1 {
  background: linear-gradient(90deg, rgba(0, 181, 255, 1) 35%, rgba(129, 222, 152, 1) 100%);
  border-radius: 20px;
  text-align: center;
}

.d2 {
  background: linear-gradient(90deg, rgba(0, 228, 255, 1) 0%, rgba(168, 129, 222, 1) 100%);
  border-radius: 20px;
  text-align: center;
}

.d3 {
  background: linear-gradient(90deg, rgba(0, 228, 255, 1) 0%, rgba(170, 222, 129, 1) 100%);
  border-radius: 20px;
  text-align: center;
}

.d4 {
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(129,222,180,1) 100%);
  border-radius: 20px;
  //padding-top: 25px;
  text-align: center;
}

.label {
  font-weight: bolder;
  font-size: large;
  color: white;
}

.label2 {
  font-weight: bolder;
  font-size: large;
  color: black;
}

.sp {
  font-size: small;
  color: gray;
}

.sp2 {
  font-size: larger;
  color: orange;
}

.sp3 {
  font-size: larger;
  color: green;
  font-weight: bold;
}

.dialog_div_1 {
  height: 50vh;
  max-height: 50vh;
  overflow-y: scroll;
  border-radius: 20px;
}
.dialog_div_1_1{
}
.dialog_row{
  padding: 6px;
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(129,222,180,1) 100%);
  border-radius: 20px;
}
.dialog_div_1_2{
  text-align: right;
}

.sp4{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    font-size: x-small;
}

.label_title{
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(129,222,216,1) 100%);
  border-bottom-right-radius: 50px;
  color: white;
  font-weight: bolder;
}
</style>